---
title: 主题化
description: 使用和自定义主题
---

# 主题化

## 使用和自定义主题

您可以调整RainbowKit的UI以匹配您的品牌。 您可以从一些预定义的强调色和边框半径配置中选择。

内置的三种主题函数：

- `lightTheme` &nbsp;（默认）
- `darkTheme`
- `midnightTheme`

一个主题函数返回一个主题对象。 您可以将该对象传递给`RainbowKitProvider`的`theme`属性。

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={darkTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

如果您愿意，您可以传入`accentColor`、`accentColorForeground`、`borderRadius`、`fontStack`和`overlayBlur`来自定义它们。

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider
    theme={darkTheme({
      __accentColor__: '#7b3fe4',
      __accentColorForeground__: 'white',
      __borderRadius__: 'small',
      __fontStack__: 'system',
      __overlayBlur__: 'small',
    })}
    {...etc}
  >
    {/* Your App */}
  </RainbowKitProvider>
);
```

### 自定义内置主题

内置主题函数也接受一个选项对象，允许您从几种不同的视觉样式中进行选择。

<PropsTable
  data={[
    {
      name: 'accentColor',
      required: false,
      default: '"#0E76FD"',
      type: 'string',
      description:
        '各种交互元素的背景/文本颜色。',
    },
    {
      name: 'accentColorForeground',
      required: false,
      default: '"white"',
      type: 'string',
      description:
        '用于在强调色上渲染的前景元素的颜色。',
    },
    {
      name: 'borderRadius',
      required: false,
      default: 'large',
      type: '"none" | "small" | "medium" | "large"',
      typeSimple: 'enum',
      description: '整个边框半径规模的大小。',
    },
    {
      name: 'fontStack',
      required: false,
      default: 'rounded',
      type: '"rounded" | "system"',
      typeSimple: 'enum',
      description:
        "UI中使用的字体堆栈。 请注意，`rounded` 试图使用 SF Pro Rounded，当不可用时会使用系统字体。", 
    },
    {
      name: 'overlayBlur',
      required: false,
      default: 'none',
      type: '"large" | "small" | "none"',
      typeSimple: 'enum',
      description: '模态背景模糊。',
    },
  ]}
/>

例如，自定义深色主题为紫色强调色和“medium”边框半径尺度：

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

每个主题还提供了几个强调色预设（`blue`、`green`、`orange`、`pink`、`purple`、`red`），可以扩展到选项对象中。例如，要使用`pink`强调色预设：

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.pink,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

### 示例

#### 主题函数

这里有几种使用`theme`属性的不同方式。

使用`darkTheme`主题。

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={darkTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

使用`midnightTheme`主题。

```tsx
import {
  RainbowKitProvider,
  midnightTheme,
} from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={midnightTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

#### 强调色

这里有几种使用`accentColor`配置的不同方式。

将强调色设置为自定义紫色值。

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

将强调色设置为内置的`green`预设。

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.green,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### 边框半径

这里有几种使用`borderRadius`配置的不同方式。

将边框半径设置为"medium"。

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

将边框半径设置为"none"。

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'none',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

> 提醒：可用的边框半径值为：`large`（默认）、`medium`、`small` 和 `none`。

#### 字体堆栈

默认情况下，`fontStack`设置为`rounded`。 但这里是如何使用`fontStack`配置。

将字体堆栈设置为`system`。

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### 覆盖模糊

默认情况下，`overlayBlur`设置为“none”。 但这里是如何使用`overlayBlur`配置。

将覆盖模糊设置为`small`。

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        overlayBlur: 'small',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### 混搭

这里有几种使用不同主题，并结合`accentColor`、`borderRadius`和`fontStack`属性的方法。

- 使用`lightTheme`主题
- 将强调色设置为自定义紫色值
- 将边框半径设置为"medium"
- 将字体堆栈设置为`system`

```tsx
import { RainbowKitProvider, lightTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={lightTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

- 使用`midnightTheme`主题
- 将强调色设置为内置的`pink`预设。
- 将边框半径设置为"small"
- 将字体堆栈设置为`system`

```tsx
import {
  RainbowKitProvider,
  midnightTheme,
} from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={midnightTheme({
        ...midnightTheme.accentColors.pink,
        borderRadius: 'small',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### 深色模式支持

如果您的应用程序使用标准`prefers-color-scheme: dark`媒体查询在浅色和深色模式之间切换，您可以选择提供一个包含`lightMode`和`darkMode`值的动态主题对象。

```tsx
import {
  RainbowKitProvider,
  lightTheme,
  darkTheme,
} from '@rainbow-me/rainbowkit';

const App = () => (
  <RainbowKitProvider
    theme={{
      lightMode: lightTheme(),
      darkMode: darkTheme(),
    }}
    {...etc}
  >
    {/* Your App */}
  </RainbowKitProvider>
);
```
